<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="App">

        <div ng-controller="OneCtrl">
            <div ng-controller="TwoCtrl">
                <button ng-click="func()">触发传值</button>
                <div ng-controller="ThreeCtrl">
                </div>
            </div>
        </div>

        <div ng-controller="FourCtrl">
            <button ng-click="sendValue()">传值</button>
        </div>

    </body>
    <script type="text/javascript">
        angular.module('App', [])
        .controller('OneCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
            // 定义一个函数，用于接收值
            // 函数可以被子控制器调用，就意味着可以通过函数的参数传值，但是注意：第一个参数为事件对象，第二个参数才是传递的值
            $scope.$on('to-parent', function (event, value) {
                console.log(value);
                console.log('to-parent');
            });

            $rootScope.$on('getValue', function () {
                console.log('getValue');
            });
        }])
        .controller('TwoCtrl', ['$scope', function ($scope) {
            $scope.func = function () {
                // $emit() 可以触发父控制器中的方法
                $scope.$emit('to-parent', 30);
                // $broadcast() 可以触发子控制器中的方法
                $scope.$broadcast('to-child');
            };
        }])
        .controller('ThreeCtrl', ['$scope', function ($scope) {
            $scope.$on('to-child', function () {
                console.log('to-child');
            });
        }])

        .controller('FourCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
            $scope.sendValue = function () {
                $rootScope.$emit('getValue');
                $rootScope.$broadcast('getValue');
            };
        }])

    </script>
</html>
